<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>老张的第一个网页3D</title>
	</head>
	<style>
		/* 隐藏body窗口区域滚动条 */
		body{
			margin: 0;
			overflow: hidden;
		}
	</style>
	<script src="./three.js"></script>
	<!-- <script src="GLTFLoader.js"></script> -->
	<body>
		<script>
			// var THREE =window.THREE =require('three');
			//场景
			var scene= new THREE.Scene(); //创建场景
			
			// //加载GLTFLoader
			// var loader =new THREE.GLTFLoader();
			// loader.load('a.glb',function(gltf){
			// 	scene.add(gltf.scene);
			// },undefined,function(error){
			// 	console.error(error);
			// });
			
			//几何体
			var geometry=new THREE.BoxGeometry(100,100,100);//创建box
			var material=new THREE.MeshLambertMaterial({color:'696969'}); //窗口材质
			var mesh=new THREE.Mesh(geometry,material);//通过几何体与材质信息生成Mesh网格
			scene.add(mesh);//添加mesh到场景
			
			
			//创建一个点光源
			var point=new THREE.PointLight(0xffffff);
			point.position.set(400,200,300);//点光源位置
			scene.add(point);  //添加点光源
			
			//创建环境光
			var ambient=new THREE.AmbientLight(0x444444);
			scene.add(ambient);
			
			//相机设置
			var width=window.innerWidth;//窗口宽度
			var height=window.innerHeight;//窗口高度
			var k=width/height;//宽高比
			var s= 200;//三维场景显示范围控制系数，系数越大，显示范围越大
			
			//创建相机
			var camera=new THREE.OrthographicCamera(-s*k,s*k,s,-s,1,1000);
			camera.position.set(200,300,200);//设置相机位置
			camera.lookAt(scene.position);
			
			//创建渲染器
			var render=new THREE.WebGLRenderer();
			render.setSize(width,height);//设置渲染尺寸
			render.setClearColor(0xb9d3ff,1)//设置背景颜色
			document.body.appendChild(render.domElement);//body元素中插入canvas对象
		
			//开始渲染
			render.render(scene,camera);
			
		</script>
	</body>
</html>
